<template>
    <div class="demo-split">
        <el-row :gutter="20">
            <el-col :span="24">
                <div class="grid-content bg-purple">
                    当前进行交易的股票为 {{ stockName }}
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <div class="grid-content bg-purple chart" id='chartContainer'>
                    <k-chart/>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <latest-deal :stockId= tradeId />
                    <!--
                    <el-button @click="webSocketSend">发送消息</el-button>
                    <el-button @click="getUserInfo">获取用户信息</el-button>
                    -->
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <order-book :stockId= tradeId />
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <div class="grid-content bg-purple">
                    <history :id="tradeId" />
                </div>
            </el-col>
            <el-col :span="12">
                <div class="grid-content bg-purple">
                    <exchange :id="tradeId" />
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { getStock } from '@/api/login'
import KChart from '@/components/echarts/KChart'
import LatestDeal from '@/components/LatestDeal'
import OrderBook from '@/components/OrderBook'
import Exchange from '@/components/Exchange'
import History from '../components/History'
import { myStock } from '@/api/order'
import store from '@/store'

const TRADE_URL = 'ws://127.0.0.1:8000/ws/trade/123/'
const TEST_URL = 'ws://127.0.0.1:8000/ws/chat/123/'

export default {
    name: 'Trade',
    props: ['id'],
    components: {
        KChart,
        LatestDeal,
        OrderBook,
        Exchange,
        History,
    },
    data() {
        return {
            split3: 0.7,
            split4: 0.625,
        }
    },
    computed: {
        tradeId() {
            return parseInt(this.id, 10)
        },
        stockName() {
            return store.state.stockInfo[this.id]
        },
    },
    methods: {
        initWebSocket() {
            const wsUri = TEST_URL
            this.websock = new WebSocket(wsUri)
            this.websock.onerror = this.webSocketOnError
            this.websock.onmessage = this.webSocketOnMessage
        },
        webSocketOnError(e) {
            this.$notify({
                title: 'WebSocket连接发生错误',
                type: 'error',
                duration: 0,
            })
        },
        webSocketOnMessage(e) {
            const data = JSON.parse(e.data)
            console.log(data)
            console.log(data.message)
        },
        webSocketSend() {
            this.websock.send(JSON.stringify({ message: 123 }))
        },
        getUserInfo() {
            getStock().then(res => {
                console.log(res)
            })
        },
    },
    mounted() {
        console.log('当前的股票id是' + this.id)
        this.initWebSocket()
    },
    created() {},
}
</script>

<style>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.chart {
    min-height: 400px;
}
</style>
